<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="title-style text mx-2">今日档案提交量</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <CenterLeft1Chart :cdata="cdata" />
      </div>
      <!-- 4个主要的数据 -->
      <div class="bottom-data">
        <div
          class="item-box mt-2"
          v-for="(item, index) in numberData"
          :key="index"
        >
          <div class="number-style">
            {{ item.number }}
          </div>
          <div>
            {{ item.text }}
            <span class="colorYellow">(件)</span>
          </div>
          <!-- <div class="d-flex">
            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
          </div>
          <p class="text" style="text-align: center">
            {{ item.text }}
            <span class="colorYellow">(件)</span>
          </p> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
import { getTodaySubmit } from '../api/archive'

export default {
  data () {
    return {
      numberData: [
        {
          number: 0,
          text: "今日提交总量",
        },
        {
          number: 0,
          text: "总共完成数量",
        },
        {
          number: 0,
          text: "正在审核数量",
        },
        {
          number: 0,
          text: "未通过数量",
        },
      ],
      cdata: {
        xData: [],
        seriesData: [],
      },
    };
  },
  components: {
    CenterLeft1Chart,
  },
  created () { },
  mounted () {
    this.getTodaySubmit();
    this.changeTiming();
  },
  methods: {
    // 获取今日档案提交量
    getTodaySubmit () {
      getTodaySubmit().then((res) => {
        let seriesData = [];
        res.data.seriesData.forEach((item) => {
          seriesData.push({
            value: item.count,
            name: item.archCateName,
          });
        });
        this.cdata = {
          xData: res.data.xdata,
          seriesData: seriesData,
        };
        this.numberData[0].number = res.data.submitCountToday;
        this.numberData[1].number = res.data.allPassCount;
        this.numberData[2].number = res.data.isAuditCount;
        this.numberData[3].number = res.data.allNoPassCount;
      });
    },
    changeTiming () {
      setInterval(() => {
        this.getTodaySubmit();
      }, 180000);
    },
  },
};
</script>

<style lang="scss" scoped>
$box-width: 300px;
$box-height: 410px;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  // width: $box-width;
  border-radius: 10px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }
      font-size: 14px;
      float: right;

      text-align: center;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      .dv-digital-flop {
        margin: 0 auto;
        min-width: 40px;
        height: 30px;
      }
      // 金币
      .coin {
        position: relative;
        top: 6px;
        font-size: 20px;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
      p {
        text-align: center;
      }
    }
  }
}
.number-style {
  font-size: 26px;
  color: #5dd1c5;
  margin: 8px 0;
}
</style>
